---
import BasicContainerLayout from "@/layouts/BasicContainerLayout/index.astro";
import LogoAndText from "@/components/LogoAndText/index.astro";
import useWikiInfo from "@/hooks/useWikiInfo";
import BottomGuide from "./_index/BottomGuide.astro";
import useAdvancement from "@/hooks/useAdvancement";

const { itemCount, commitCount, tagCount } = await useWikiInfo();

const WikiInfo = [
  [tagCount, "次Release"],
  [itemCount, "份词条"],
  [commitCount, "次编辑"],
];

useAdvancement("providencraft");
---

<BasicContainerLayout title="欢迎～(∠·ω< )⌒★">
  <div
    class="w-full flex flex-col md:flex-row justify-center items-center gap-4"
  >
    <div class="w-36 h-[150px] md:h-28">
      <LogoAndText logoWidth="w-[80px]" />
    </div>
    <div
      class="flex flex-col text-[24px] font-bold gap-1 text-center md:text-left"
    >
      <p>Providencraft Mod</p>
      <p>官方 Wiki</p>
      <p class="text-[14px]">嗯...就这样吧...</p>
    </div>
  </div>
  <div class="flex flex-col items-center mt-4 gap-4">
    <div class="flex gap-3">
      {
        WikiInfo.map(([count, name]) => (
          <p class="flex-1 md:flex-auto text-center">
            <strong class="text-[24px] mr-1">{count}</strong>
            {name}
          </p>
        ))
      }
    </div>
    <div class="flex flex-col gap-4 md:gap-2 text-center">
      <p>本模组是虚拟主播公司普罗维登企划粉丝制作的同人模组。</p>
      <p>包含了每一位虚拟主播的相关物品，灵感来源为对应主播的设定/梗。</p>
      <p>
        本模组与普罗维登企划没有实际上的联系，仅为二创作品，具体设定请以普罗维登官网为准。
      </p>
      <p>反馈群：831277455</p>
    </div>
  </div>
  <div class="block w-[96%] h-[1px] bg-white/30 my-4 mx-auto"></div>
  <BottomGuide />
</BasicContainerLayout>
